@charset "utf-8";
@function p($px) {
    @return $px/2*1px;
}

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
}

html,
body {
    width: 100%;
    height: 100%;
    background: url(../img/bg.jpg);
}

.web {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative; // 兑换码提交表单
    .converBox {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
        p {
            font-size: p(31);
            color: #e7c598;
            letter-spacing: p(1);
        }
        input {
            margin-top: p(30);
            width:p(320);
            height: p(40);
            border: none;
            border-radius: p(10);
            font-size: 12px;
            background: #e7c598;
            outline: none;
            padding-left: p(20);
            color: #bf0c21;
            font-weight: bold;
            outline: none;
        }
        .buttonBox {
            //文本框与按钮
            margin: 0 auto;
            margin-top: p(50);
            width: p(253);
            height: p(49);
            position: relative;
            overflow: hidden;
            
            button {
                width: p(253);
                height: p(49);
                line-height: p(49);
                border: none;
                background: transparent;
                background: url(../img/确定.png) no-repeat;
                background-size: 100%,100%;
                font-size: p(20);
                color: #e7c598;
                outline: none;
                
            }
            .yinY {
                width: p(22);
                height: p(47);
                position: absolute;
                top: 0;
                left: p(-31);
                background: #fff;
                opacity: 0.3;
                transform: skewX(-20deg);
                animation-name: myYin;
                animation-duration: 3.6s;
                animation-iteration-count: 1;
                animation-play-state: running;
                animation-iteration-count: infinite;
            }
            @keyframes myYin {
                0% {
                    transform: translateX(0PX) skewX(-20deg);
                }
                10% {
                    transform: translateX(150PX) skewX(-20deg);
                }
                20%,
                70%,
                80%,
                90% {
                    transform: translateX(0PX) skewX(-20deg);
                }
                100% {
                    transform: translateX(0PX) skewX(-20deg);
                }
            }
        }
    }
    .exchange_successful {
        // 兑换成功
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.5);
        width: 100%;
        height: 100%;
        display: none;
        .connterT {
            width: 55%;
            padding: p(40) 0;
            background: #e7c598;
            text-align: center;
            border-radius: p(10);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50% ,-50%);
            overflow: hidden; // 缩放动画
            animation-name: myAnm;
            animation-duration: 0.7s;
            animation-iteration-count: 1;
            animation-play-state: running;
            p {
                line-height: p(160);
                font-size: p(40);
                color: #bf0c21;
                font-weight: bold;
            }
            span {
                position: absolute;
                top: p(10);
                right: p(10);
                display: inline-block;
                width: p(40);
                height: p(40);
                border-radius: 50%;
                background: #bf0c21;
                i {
                    font-size: p(40);
                    color: #e7c598;
                    line-height: p(40);
                }
            }
        }
        
    }
    .exchange_fault {
        //兑换失败
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.5);
        width: 100%;
        height: 100%;
        display: none;
        .connterF {
            width: 55%;
            padding: p(40) 0;
            background: #e7c598;
            text-align: center;
            border-radius: p(10);
            
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50% ,-50%);
            overflow: hidden; // 缩放动画
            animation-name: myAnm;
            animation-duration: 0.7s;
            animation-iteration-count: 1;
            animation-play-state: running;
            p {
                margin-top: p(10);
                font-size: p(40);
                color: #bf0c21;
                font-weight: bold;
            }
            button {
                display: inline-block;
                width: p(240);
                height: p(40);
                background: #bf0c21;
                color: #e7c598;
                font-size: p(22);
                border: none;
                border-radius: p(10);
                margin-top: p(20);
                outline: none;
            }
            span {
                position: absolute;
                top: p(10);
                right: p(10);
                display: inline-block;
                width: p(40);
                height: p(40);
                border-radius: 50%;
                background: #bf0c21;
                i {
                    font-size: p(40);
                    color: #e7c598;
                    line-height: p(40);
                }
            }
        }
        @keyframes myAnm {
            0% {
                transform:translate(-50% ,-50%) scale(1.2);
            }
            20% {
                transform:translate(-50% ,-50%) scale(1);
            }
            40% {
                transform:translate(-50% ,-50%) scale(1.1);
            }
            60% {
                transform:translate(-50% ,-50%) scale(1);
            }
            80% {
                transform:translate(-50% ,-50%) scale(1.05);
            }
            100% {
                transform:translate(-50% ,-50%) scale(1);
            }
        }
    } // homebtn
    .homebtn {
        width: p(41);
        height: p(41);
        border-radius: 50%;
        background: #e7c598;
        position: fixed;
        right: p(50);
        bottom: p(30);
        text-align: center;
        a {
            display: block;
            line-height: p(41);
            i {
                font-size: p(30);
                color: #bf0c21;
                line-height: p(41);
                font-weight: bold;
            }
        }
    }
}

// IP6
@media only screen and (min-height:667px) and (max-height:735px) {
    .converBox,
    .homebtn {
        transform: scale(1.3);
    }
}

// IP6PL
@media only screen and (min-height:736px) {
    .converBox,
    .homebtn {
        transform: scale(1.3);
    }
}